<template>
  <div class="page-wrap">
    <el-card shadow="never">
      <div class="toolbar">
        <el-input v-model="filters.search" placeholder="搜索名称/编码/款号" clearable class="w-300" />
        <el-select v-model="filters.category" placeholder="类别" clearable class="w-160">
          <el-option v-for="c in categories" :key="c" :label="c" :value="c" />
        </el-select>
        <el-select v-model="filters.brand" placeholder="品牌" clearable class="w-160">
          <el-option v-for="b in brands" :key="b" :label="b" :value="b" />
        </el-select>
        <el-select v-model="filters.status" placeholder="状态" clearable class="w-160">
          <el-option label="上架" value="on" />
          <el-option label="下架" value="off" />
        </el-select>
        <el-button type="primary" @click="openAdd">新增商品</el-button>
        <el-button @click="exportCsv">导出</el-button>
      </div>

      <el-table :data="pagedList" border stripe height="560px">
        <el-table-column prop="code" label="编码" width="120" />
        <el-table-column prop="name" label="名称" min-width="160" />
        <el-table-column prop="styleNo" label="款号" width="120" />
        <el-table-column prop="color" label="颜色" width="100" />
        <el-table-column prop="size" label="尺码" width="100" />
        <el-table-column prop="category" label="类别" width="120" />
        <el-table-column prop="brand" label="品牌" width="120" />
        <el-table-column prop="salePrice" label="售价" width="100" />
        <el-table-column prop="status" label="状态" width="90">
          <template #default="{ row }">
            <el-tag :type="row.status==='on'?'success':'info'">{{ row.status==='on'?'上架':'下架' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="openEdit(row)">编辑</el-button>
            <el-button size="small" @click="toggle(row)">{{ row.status==='on'?'下架':'上架' }}</el-button>
            <el-button size="small" type="danger" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="page.size"
        :total="dataList.length"
        v-model:current-page="page.index"
      />
    </div>

    <!-- 新增/编辑 -->
    <el-dialog v-model="editVisible" :title="editForm.id?'编辑商品':'新增商品'" width="680px">
      <el-form :model="editForm" :rules="rules" ref="editRef" label-width="90px">
        <div class="form-grid">
          <el-form-item label="编码" prop="code"><el-input v-model="editForm.code" /></el-form-item>
          <el-form-item label="名称" prop="name"><el-input v-model="editForm.name" /></el-form-item>
          <el-form-item label="款号"><el-input v-model="editForm.styleNo" /></el-form-item>
          <el-form-item label="颜色"><el-input v-model="editForm.color" /></el-form-item>
          <el-form-item label="尺码"><el-input v-model="editForm.size" /></el-form-item>
          <el-form-item label="类别"><el-select v-model="editForm.category" filterable><el-option v-for="c in categories" :key="c" :label="c" :value="c"/></el-select></el-form-item>
          <el-form-item label="品牌"><el-select v-model="editForm.brand" filterable><el-option v-for="b in brands" :key="b" :label="b" :value="b"/></el-select></el-form-item>
          <el-form-item label="售价"><el-input-number v-model="editForm.salePrice" :min="0" :precision="2" /></el-form-item>
          <el-form-item label="成本"><el-input-number v-model="editForm.costPrice" :min="0" :precision="2" /></el-form-item>
          <el-form-item label="条码"><el-input v-model="editForm.barcode" /></el-form-item>
          <el-form-item label="状态"><el-select v-model="editForm.status"><el-option label="上架" value="on"/><el-option label="下架" value="off"/></el-select></el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="editVisible=false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { useProductStore } from '@/stores/product.js'

const store = useProductStore()
const filters = reactive({ search: '', category: '', brand: '', status: '' })
const categories = computed(() => store.categories)
const brands = computed(() => store.brands)
const dataList = computed(() => store.getFilteredProducts(filters))
const page = reactive({ index: 1, size: 10 })
const pagedList = computed(() => dataList.value.slice((page.index-1)*page.size, page.index*page.size))

onMounted(() => {
  if (!store.productList.length) store.initializeProducts()
})

const editVisible = ref(false)
const editRef = ref()
const editForm = reactive({
  id: '', code: '', name: '', category: '', brand: '', specification: '', unit: '件',
  salePrice: 0, costPrice: 0, status: 'off', barcode: '', styleNo: '', color: '', size: '', season: '', year: ''
})

const rules = {
  code: [{ required: true, message: '请输入编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
}

function openAdd() {
  Object.assign(editForm, { id: '', code: '', name: '', category: '', brand: '', specification: '', unit: '件', salePrice: 0, costPrice: 0, status: 'off', barcode: '', styleNo: '', color: '', size: '', season: '', year: '' })
  editVisible.value = true
}
function openEdit(row) {
  Object.assign(editForm, row)
  editVisible.value = true
}
function onSave() {
  editRef.value.validate(valid => {
    if (!valid) return
    if (editForm.id) {
      store.updateProduct(editForm.id, editForm)
    } else {
      store.addProduct(editForm)
    }
    editVisible.value = false
  })
}
function onDelete(row) {
  store.deleteProduct(row.id)
}
function toggle(row) {
  store.toggleStatus(row.id)
}

function exportCsv(){
  store.exportProducts(dataList.value)
}
</script>

<style scoped>
.page-wrap { padding: 16px; }
.toolbar { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
.w-300 { width: 300px; }
.w-160 { width: 160px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 12px; }
</style>


